﻿
@{
    Layout = "~/Views/ByJuYe/BuJuYe.cshtml";
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />

<style>
    .title_1 {
        text-align: center;
        width: 50px;
    }

    .title_2 {
        text-align: center;
    }

    .title_3 {
        text-align: center;
        width: 80px;
    }

    .title_4 {
        text-align: center;
        width: 80px;
    }

    .title_5 {
        text-align: center;
        width: 100px;
    }

    .title_6 {
        text-align: center;
        width: 80px;
    }

    .title_7 {
        text-align: center;
        width: 60px;
    }

    .line {
        background-color: #a7cbff;
        height: 3px;
    }

    .cart_td_1, .cart_td_2, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7, .cart_td_8 {
        background-color: #e2f2ff;
        border-bottom: solid 1px #d1ecff;
        border-top: solid 1px #d1ecff;
        text-align: center;
        padding: 5px;
    }

    .cart_td_1, .cart_td_3, .cart_td_4, .cart_td_5, .cart_td_6, .cart_td_7 {
        border-right: solid 1px #FFF;
    }

    .cart_td_3 {
        text-align: left;
    }

    .cart_td_4 {
        font-weight: bold;
    }

    .cart_td_7 {
        font-weight: bold;
        color: #fe6400;
        font-size: 14px;
    }

    .shopInfo {
        padding-left: 10px;
        height: 35px;
        vertical-align: bottom;
    }

    .num_input {
        border: solid 1px #666;
        width: 25px;
        height: 15px;
        text-align: center;
    }

    .hand {
        cursor: pointer;
    }
</style>
<!-- NAVIGATION -->
<div id="navigation">
    <!-- container -->
    <div class="container">
        <div id="responsive-nav">
            <!-- category nav -->
            <div class="category-nav show-on-click">
                <span class="category-header">Categories <i class="fa fa-list"></i></span>
                <ul class="category-list">
                    <li class="dropdown side-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Women’s Clothing <i class="fa fa-angle-right"></i></a>
                        <div class="custom-menu">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row hidden-sm hidden-xs">
                                <div class="col-md-12">
                                    <hr>
                                    <a class="banner banner-1" href="#">
                                        <img src="~/FrontDesk/img/banner05.jpg" alt="">
                                        <div class="banner-caption text-center">
                                            <h2 class="white-color">NEW COLLECTION</h2>
                                            <h3 class="white-color font-weak">HOT DEAL</h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Men’s Clothing</a></li>
                    <li class="dropdown side-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Phones & Accessories <i class="fa fa-angle-right"></i></a>
                        <div class="custom-menu">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-4 hidden-sm hidden-xs">
                                    <a class="banner banner-2" href="#">
                                        <img src="~/FrontDesk/img/banner04.jpg" alt="">
                                        <div class="banner-caption">
                                            <h3 class="white-color">NEW<br>COLLECTION</h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Computer & Office</a></li>
                    <li><a href="#">Consumer Electronics</a></li>
                    <li class="dropdown side-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Jewelry & Watches <i class="fa fa-angle-right"></i></a>
                        <div class="custom-menu">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Bags & Shoes</a></li>
                    <li><a href="#">View All</a></li>
                </ul>
            </div>
            <!-- /category nav -->
            <!-- menu nav -->
            <div class="menu-nav">
                <span class="menu-header">Menu <i class="fa fa-bars"></i></span>
                <ul class="menu-list">
                    <li><a href="/Home/Index">主页</a></li>
                    <li><a href="/Home/Shoes">商品</a></li>
                    <li class="dropdown mega-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Women <i class="fa fa-caret-down"></i></a>
                        <div class="custom-menu">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                    <hr class="hidden-md hidden-lg">
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="row hidden-sm hidden-xs">
                                <div class="col-md-12">
                                    <hr>
                                    <a class="banner banner-1" href="#">
                                        <img src="~/FrontDesk/img/banner05.jpg" alt="">
                                        <div class="banner-caption text-center">
                                            <h2 class="white-color">NEW COLLECTION</h2>
                                            <h3 class="white-color font-weak">HOT DEAL</h3>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="dropdown mega-dropdown full-width">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Men <i class="fa fa-caret-down"></i></a>
                        <div class="custom-menu">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="hidden-sm hidden-xs">
                                        <a class="banner banner-1" href="#">
                                            <img src="~/FrontDesk/img/banner06.jpg" alt="">
                                            <div class="banner-caption text-center">
                                                <h3 class="white-color text-uppercase">Women’s</h3>
                                            </div>
                                        </a>
                                        <hr>
                                    </div>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3">
                                    <div class="hidden-sm hidden-xs">
                                        <a class="banner banner-1" href="#">
                                            <img src="~/FrontDesk/img/banner07.jpg" alt="">
                                            <div class="banner-caption text-center">
                                                <h3 class="white-color text-uppercase">Men’s</h3>
                                            </div>
                                        </a>
                                    </div>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3">
                                    <div class="hidden-sm hidden-xs">
                                        <a class="banner banner-1" href="#">
                                            <img src="~/FrontDesk/img/banner08.jpg" alt="">
                                            <div class="banner-caption text-center">
                                                <h3 class="white-color text-uppercase">Accessories</h3>
                                            </div>
                                        </a>
                                    </div>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                                <div class="col-md-3">
                                    <div class="hidden-sm hidden-xs">
                                        <a class="banner banner-1" href="#">
                                            <img src="~/FrontDesk/img/banner09.jpg" alt="">
                                            <div class="banner-caption text-center">
                                                <h3 class="white-color text-uppercase">Bags</h3>
                                            </div>
                                        </a>
                                    </div>
                                    <hr>
                                    <ul class="list-links">
                                        <li>
                                            <h3 class="list-links-title">Categories</h3>
                                        </li>
                                        <li><a href="#">Women’s Clothing</a></li>
                                        <li><a href="#">Men’s Clothing</a></li>
                                        <li><a href="#">Phones & Accessories</a></li>
                                        <li><a href="#">Jewelry & Watches</a></li>
                                        <li><a href="#">Bags & Shoes</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Sales</a></li>
                    <li class="dropdown default-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Pages <i class="fa fa-caret-down"></i></a>
                        <ul class="custom-menu">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="products.html">Products</a></li>
                            <li><a href="product-page.html">Product Details</a></li>
                            <li><a href="checkout.html">Checkout</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- menu nav -->
        </div>
    </div>
    <!-- /container -->
</div>
<!-- /NAVIGATION -->
<!-- BREADCRUMB -->
<div id="breadcrumb">
    <div class="container">
        <ul class="breadcrumb">
            <li><a href="/Home/Index">主页</a></li>
            <li class="active">购物车</li>
        </ul>
    </div>
</div>
<!-- /BREADCRUMB -->
<!-- section -->
<div class="section">
    <!-- container -->
    <div class="container">
        <!-- row=============================================== -->
        <div class="row">
            <div class="col-md-12">
                <form>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping" lay-filter="test123">
                        <tr>
                            <td class="title_1"> <input id="allCheckBox" type="checkbox" value="" />全选</td>
                            <td class="title_2" colspan="2">商品</td>
                            <td class="title_3">单价</td>
                            <td class="title_4">数量</td>
                            <td class="title_6">小计</td>
                            <td class="title_7">操作</td>

                        </tr>
                        <tr>
                            <td colspan="8" class="line"></td>
                        </tr>
                        @foreach (var item in Model)
                        {
                            <tr id="product1">
                                <td class="cart_td_1"><input type="checkbox" id="@item.Id" class="carts" name="cartCheckBox" /></td>
                                <td class="cart_td_2"><img src="~/FrontDesk/img/1 (20).jpg" alt="商品图片" style="max-height:70px;max-width:80px;" /></td>

                                <td class="cart_td_3">
                                    <a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br />
                                    颜色：棕色 尺码：37<br />

                                </td>
                                <td class="cart_td_5" name="price">@item.Price</td>
                                <td class="cart_td_6" nowrap>
                                    <img src="~/Content/Image/减_.png" name="btnRed" style="max-width:30px;max-height:30px;" class="hand" />
                                    <input id="num_1" type="text" name="@item.Id" value="@item.ShopNum" class="num_input ShopNum num_1" />
                                    <img src="~/Content/Image/加.png" name="btnAdd" style="max-width:30px;max-height:30px;" class="hand" />
                                </td>
                                <td class="cart_td_7 total money" name="XiaoJi">@item.Total</td>
                                <td class="cart_td_8"><a href="#" class="delBtn main-btn1" name="@item.Id">删除</a></td>
                            </tr>
                        }

                        <tr>
                            <td colspan="3">@*<button class="layui-btn layui-btn-xs layui-btn-warm">删除所选</button>*@</td>
                            <td colspan="5" class="shopend">
                                商品总价：<label id="totalTxt" class="yellow">00.00</label>元<br />
                                <input name="" type="image" id="subBtn" src="~/Content/Image/下载.jpeg" style="max-height:100px;max-width:200px;" />
                            </td>
                        </tr>
                    </table>

                </form>
            </div>
        </div>
        <!-- /row -->
    </div>
    <!-- /container -->
</div>

<script src="~/scripts/jquery-3.5.1.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script>
    var carts = "";
    var $ = null;
    var addressCon = null;

    layui.use(['form', 'layedit', 'laydate', 'layer', 'table'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            ;
        var table = layui.table;
        $ = layui.$

        var FrmAddress = null;

        $("#allCheckBox").click(function () {
            var oInput = document.getElementsByName("cartCheckBox");
            for (var i = 0; i < oInput.length; i++) {
                oInput[i].checked = document.getElementById("allCheckBox").checked;
            }
        });
        $(".carts").change(function () {
            if (this.checked == true) {
                carts += this.id+",";
                console.log(carts);
            }
            if (this.checked == false) {
                var ret = carts.split(this.id+",");
                var con = ret.join("");
                carts = con;
                console.log(carts);
            }

            jisuan();
        })


        function doOrder() {
            var obj = document.getElementsByName("Carts");
            if (obj.length > 0) {
                var chkVal = [];
                for (i in obj) {
                    if (obj[i].checked) {
                        chkVal.push(obj[i].value);
                    }
                }
                alert(chkVal);
            } else {
                alert("请选择商品");
            }
        }
        $(".XiaoJi").click(function () {


        });

        //减号所调用的方法
        $('[name="btnRed"]').click(function () {
            var num = parseInt($(this).siblings("input").val());
            console.log(num);
            var price = parseFloat($(this).parent().siblings('[name="price"]').text()).toFixed(2);

            console.log(price);
            var con = $(this).siblings("input").attr("name");
            console.log(con);

            if (num <= 1) {
                layer.msg("商品数量不能小于1");
                return false;
            } else {
                num--;
                $(this).siblings("input").val(num);
                $.ajax({
                    url: "/Cart/UpdateNum",
                    type: "post",
                    data: { ShopNum: num, id: con },
                    success: function (re) {

                    }
                });
            };
            $(this).parent().siblings('.total').text((num * price).toFixed(2));
            jisuan();
        });
        //加号所调用的方法
        $('[name="btnAdd"]').click(function () {
            var num = parseInt($(this).siblings("input").val());
            console.log(num);
            var price = parseFloat($(this).parent().siblings('[name="price"]').text()).toFixed(2);
            console.log(price);
            var con = parseInt($(this).siblings("input").attr("name"));

            console.log(con);
            num++;
            $(this).siblings("input").val(num);
            $.ajax({
                url: "/Cart/UpdateNum",
                type: "post",
                data: { ShopNum: num, id: con },
                success: function (re) {

                }
            });
            $(this).parent().siblings('.total').text((num * price).toFixed(2));
            jisuan();

        });

        //下单
        $("#subBtn").click(function () {
            console.log(123);
            window.location.href = "/Cart/PlaceOrderView?ids=" + carts;
            return false;
        });

        //清空购物车
        $("#ClearCart").click(function (re) {
            layer.confirm('小主您确定要清空购物车吗？', function (index) {
                $.ajax({
                    url: "/Cart/ClearCart",
                    type: "Post",
                    data: "",
                    success: function (re) {
                        if (re.success > 0) {
                            layer.msg(re.msg);
                            layer.close(index);
                        }
                        else {
                            layer.msg(re.msg);
                            layer.close(index);
                        }
                    }
                });
            });
            return false;

        });
        //删除商品
        $(".main-btn1").click(function () {
            console.log(1);
            var con = $(".delBtn").attr("name");
            $.ajax({
                url: "/Cart/DelCartShop",
                type: "post",
                data: { id: con },
                success: function (re) {
                    location.reload();
                }
            });
        });
    });

    //计算总价
    function jisuan() {
        var all = 0;
        var len = $("input[type='checkbox']:checked").length;
        if (len == 0) {
            $("#totalTxt").text(parseFloat(0).toFixed(2));
        } else {
            $("input[type='checkbox']:checked").each(function () {
                //获取小计里的数值
                var sAll = $(this).parent().siblings('.money').text();
                console.log("小计的数值" + sAll);
                //累加
                all += parseFloat(sAll * 1);
                //赋值
                $("#totalTxt").text(all.toFixed(2));
            })
        }

    };


</script>